<script setup lang="ts">
import { ref, onMounted } from "vue";
import { getCategoryData } from "../../api/server";

// 分类数据类型定义
interface Category {
  // 分类的唯一标识符
  cid: number;
  // 分类的名称
  cname: string;
  // 分类下的产品列表
  children: Product[];
}

interface CategoryData {
  // 分类列表
  list: Category[];
  // 轮播图图片地址列表
  swipe: string[];
}

// 产品数据类型定义
interface Product {
  // 产品的唯一标识符
  tid: number;
  // 产品的名称
  tname: string;
  // 产品的价格
  price: number;
  // 产品的图片地址
  timg: string;
  // 产品的简介
  tintro: string;
}

// 响应式引用，存储分类数据
const categoryData = ref<CategoryData>({
  list: [],
  swipe: [],
});

// 响应式引用，当前激活的分类索引
const activeCategory = ref(0);

const fetchCategoryData = async () => {
  try {
    const response = await getCategoryData();
    if (response.data.code === 200 && response.data.data) {
      categoryData.value = response.data.data;
    }
  } catch (error) {
    console.error("获取分类数据失败:", error);
  }
};

onMounted(() => {
  fetchCategoryData();
});
</script>

<template>
  <div class="category-page">
    <!-- 轮播图 -->
    <van-swipe class="category-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item
        v-for="(swipeItem, index) in categoryData.swipe"
        :key="index"
      >
        <img :src="swipeItem" alt="category-swipe" />
      </van-swipe-item>
    </van-swipe>

    <div class="category-container">
      <div class="category-sidebar">
        <ul>
          <li
            v-for="(category, index) in categoryData.list"
            :key="category.cid"
            :class="{ active: activeCategory === index }"
            @click="activeCategory = index"
          >
            {{ category.cname }}
          </li>
        </ul>
      </div>
      <div class="category-content">
        <div class="category-products">
          <van-card
            v-for="product in categoryData.list[activeCategory]?.children || []"
            :key="product.tid"
            :price="product.price"
            :title="product.tname"
            :thumb="`http://39.105.198.203:3001/${product.timg}`"
          >
            <template #desc>
              <van-text-ellipsis :content="product.tintro" rows="2" />
            </template>
          </van-card>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.category-page {
  margin-bottom: 60px;
}

.category-swipe {
  width: 95%;
  margin: 5px auto;
  border-radius: 8px;
  overflow: hidden;
  height: 180px;
}

.category-swipe img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-container {
  display: flex;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.category-sidebar {
  width: 80px;
  background-color: #f5f5f5;
  padding: 10px;
}

.category-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.category-sidebar li {
  margin-bottom: 10px;
  padding: 8px;
  text-align: center;
  cursor: pointer;
  border-radius: 4px;
}

.category-sidebar li.active {
  background-color: #4caf50;
  color: white;
}

.category-content {
  flex: 1;
  padding: 10px;
}

.category-products {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.van-card {
  padding: 10px;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.van-card__thumb {
  width: 80px;
  height: 80px;
}

.van-card__title {
  white-space: normal;
  display: -webkit-box;
  overflow: hidden;
  margin-bottom: 5px;
}

.van-card__price {
  color: #e53935;
  font-size: 16px;
}
</style>
